<template>
	<div>
		<el-transfer v-loading="uuid_loading" element-loading-text="正在请求设备UUID数据,请稍后"
			element-loading-spinner="el-icon-loading" filterable v-model="uuid" :data="uuid_list"
			:titles="['id-地址', '选中地址']" :button-texts="['取消', '确定']" @change="handleCheckAllUUID">
			<template #default="{option}">
				{{ option.key }} - {{ option.label }}
			</template>
			<template #left-footer>
				<div v-if="loading_more" class="more">
					加载<el-input v-model="limit" size="mini" style="width:100px;" placeholder="条数"></el-input>条
					<el-button @click="limitChange" size="mini">请求</el-button>
				</div>
				<div v-else class="nomore">暂无更多数据</div>
			</template>
		</el-transfer>
	</div>
</template>

<script>
	import API from '@/api/index.js'

	export default {
		data() {
			return {
				uuid_loading: false, // 请求uuid数据加载
				addresses: this.parent_addresses,
				uuid: this.parent_uuid,
				uuid_list: [],
				copy_uuid_list: [],
				c_direction_val: this.direction_val,
				loading_more: true,
				page: 1,
				limit: '10',
			}
		},
		props: ['direction_val', 'parent_addresses', 'parent_uuid'],
		watch: {
			direction_val(val) {
				this.c_direction_val = val;
				this.getUuid();
				this.loading_more = true;
				this.page = 1;
				this.limit = "10";
			},
			parent_addresses(val) {
				this.addresses = val;
			},
			parent_uuid(val) {
				this.uuid = val;
			}
		},
		mounted() {
			this.getUuid();
		},
		methods: {
			getUuid() {
				let self = this;
				self.uuid_list = [];
				self.copy_uuid_list = [];
				self.uuid_loading = true;
				API.devices(1, 10, 0, 0, '', '', self.c_direction_val, '', 0, self.addresses).then(res => {
					let data = res.data.data;
					self.uuid_loading = false;
					self.$notify({
						message: '获取uuid接口成功'
					});
					self.page = self.page + 1;
					self.copy_uuid_list = data;
					self.copy_uuid_list.forEach(item => {
						self.uuid_list.push({
							key: item.id,
							label: item.uuid + item.remark
						});
					})
					return self.uuid_list;
				}).catch(err => {
					self.uuid_loading = false;
					self.$message.error(err.response.data.message)
				})
			},
			// 加载更多数据
			limitChange() {
				let self = this;
				self.uuid_loading = true;
				API.devices(self.page, self.limit, 0, 0, '', '', self.c_direction_val, '', 0, self.addresses).then(res => {
					self.uuid_loading = false;
					let data = res.data.data;
					self.$notify({
						message: '获取uuid接口成功'
					});
					if (data.data.length > 0) {
						self.copy_uuid_list = [];
						self.copy_uuid_list = data;
						self.copy_uuid_list.forEach(item => {
							self.uuid_list.push({
								key: item.id,
								label: item.uuid + item.remark
							});
						});
						self.page = self.page + 1;
						return self.uuid_list;
					} else {
						self.loading_more = false;
					}
				}).catch(err => {
					self.uuid_loading = false;
					self.$message.error(err.response.data.message)
				});
			},
			// 选中的地址
			handleCheckAllUUID(val) {
				let self = this;
				console.log(val)
				self.$emit('getUUID', {
					uuid_list: val
				})
			},
		}
	}
</script>

<style>
</style>
